<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章详情</title>
</head>
<body>

<div id="app">
    <div>
        <h1 align="center">{{article.title}}</h1>
        <div align="center">
            <button @click="change(article.id)">修改</button>
            /
            <button @click="deleteArticle(article.id)">删除</button>
        </div>
        <br>
        {{article.content}}
    </div>
</div>
<script type="application/javascript" src="js/vue.js"></script>
<script type="application/javascript" src="js/axios.js"></script>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            id: "",
            article: {
                id: "",
                title: "",
                content: ""
            }
        },
        created: function () {
            let id = localStorage.getItem("id")
            let vm = this;
            axios.get("detail?id=" + id).then(function (resp) {
                let body = resp.data;
                if (body.success) {
                    vm.article = body.data;
                } else {
                    alert(body.message);
                }
            })
        },
        methods: {
            change: function (id) {
                //id有值，为修改操作
                localStorage.setItem("type", "edit")
                localStorage.setItem("id", id)
                //跳转到文章新增/修改页面
                window.location.href = "articleChange.html"
            },
            deleteArticle: function (id) {
                let r =confirm("你是否要删除该文章？删除后不可恢复");
                if (r){
                    axios.get("delete?id=" + id)
                        .then(function (resp) {
                            let body = resp.data;
                            if (body.success) {
                                alert("操作成功")
                                window.location.reload()
                            } else {
                                alert("操作失败")
                            }
                        })
                }else{
                    alert("取消删除！")
                }
            },
        }
    })
</script>
</body>
</html>